<script setup lang="ts">
import { baseURL } from '@/api/_client.ts';
import { getInvasiveSpeciesById } from '@/api/agriculture.ts';
import router from '@/router';
import AllTabs from '@/views/agriculture/PlatePage/scientificKnowledge/_/DetailsPage/Tabs/AllTabs.vue';
import { ExportOutlined, HomeOutlined, LinkOutlined } from '@ant-design/icons-vue';
import { useRoute } from 'vue-router';

// 面包屑
const breadcrumb = [
  { label: '首页', path: '/' },
  { label: '科普知识', path: '/agriculture/KnowledgeView' },
  { label: '入侵物种目录', path: '/agriculture/KnowledgeView' },
];

const route = useRoute();
const items = ref<any[]>([]);
const loading = ref<boolean>(false);

const fetchItem = async (id: string) => {
  loading.value = true;

  const res = await getInvasiveSpeciesById(id);
  const { data } = res;

  // 假设 data.attributes 是包含详细信息的对象
  const attributes = data.attributes;

  const imageUrl = attributes?.image?.data?.attributes?.url;

  items.value = [
    {
      name: attributes.ScientificName,
      chineseName: attributes.ChineseName,
      Area: attributes.Area,
      Type: attributes.Type,
      Time: attributes.Time,
      imageUrl: imageUrl ? baseURL + `${imageUrl}` : null,
      jie: attributes.jie,
      men: attributes.men,
      gang: attributes.gang,
      mu: attributes.mu,
      ke: attributes.ke,
      shu: attributes.shu,
      relatedLink: attributes.url,
      DistributionInfo: attributes.DistributionInfo,
      BiologicalCharacteristics: attributes.BiologicalCharacteristics,
      EcologicalCharacteristics: attributes.EcologicalCharacteristics,
      IdentificationMethods: attributes.IdentificationMethods,
      InvasionCharacteristics: attributes.InvasionCharacteristics,
      SimilarSpecies: attributes.SimilarSpecies,
      OccurrenceLocation: attributes.OccurrenceLocation,
      GeneralImpact: attributes.GeneralImpact,
      ControlMethods: attributes.ControlMethods,
      position: attributes.position,
    },
  ];
  loading.value = false;
};

onMounted(() => {
  const id = route.params.id as string;
  fetchItem(id);
});

// 返回上一页
const goBack = () => {
  router.back();
};
</script>

<template>
  <div class="mb-12 mt-5 flex flex-col">
    <!-- 表头工具栏 -->
    <div class="flex h-14 items-center justify-between gap-2 bg-white px-6">
      <div class="flex grow-[1] items-center gap-2">
        <HomeOutlined />
        <span class="">当前位置:</span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index" :to="item.path">
            {{ item.label }}
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            {{ items[0]?.chineseName }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="flex items-center gap-2">
        <span class="ml-4 cursor-pointer" @click="goBack"> 【返回上一页】 </span>
      </div>
    </div>

    <!-- 表格 -->
    <div v-loading="loading" class="custom-shadow mt-4 min-h-[800px] bg-white p-8">
      <div class="bg-white" style="border-bottom: 2px solid rgb(41, 156, 12)">
        <div class="inline-block p-2" style="background-color: rgb(41, 156, 12)">
          <span class="mx-4 text-xl font-bold text-white">科普知识</span>
        </div>
      </div>

      <div class="mx-auto mt-6 w-full">
        <div class="flex flex-col items-start gap-8 lg:flex-row">
          <!-- 左侧详情信息 -->
          <div class="w-full lg:w-1/2">
            <div class="space-y-6">
              <a-card
                v-for="(item, index) in items"
                :key="index"
                class="overflow-hidden rounded-xl border border-gray-300 transition-shadow duration-300 hover:shadow-lg"
                :bodyStyle="{ padding: '0' }"
              >
                <!-- 卡片头部 - 标题区域 -->
                <div class="bg-gradient-to-r from-green-600 to-teal-500 p-4 text-white">
                  <h2 class="text-xl font-bold">{{ item.chineseName }}</h2>
                  <p class="text-sm italic text-green-100">{{ item.name }}</p>
                </div>

                <!-- 卡片内容 -->
                <div class="bg-white p-5">
                  <!-- 基本信息区域 -->
                  <div class="mb-6">
                    <h3 class="mb-3 flex items-center text-lg font-semibold text-gray-700">
                      <svg
                        class="mr-2 h-5 w-5 text-green-500"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                        ></path>
                      </svg>
                      基本信息
                    </h3>

                    <div class="grid grid-cols-1 gap-3">
                      <div class="detail-item rounded-lg bg-gray-50 p-3">
                        <div class="mb-1 text-xs text-gray-500">国家/组织国家/地区</div>
                        <div class="font-medium text-gray-800">{{ item.Area }}</div>
                      </div>

                      <div class="detail-item rounded-lg bg-gray-50 p-3">
                        <div class="mb-1 text-xs text-gray-500">类型</div>
                        <div class="font-medium text-gray-800">{{ item.Type }}</div>
                      </div>

                      <div class="detail-item rounded-lg bg-gray-50 p-3">
                        <div class="mb-1 text-xs text-gray-500">更新时间</div>
                        <div class="font-medium text-gray-800">{{ item.Time }}</div>
                      </div>
                    </div>
                  </div>

                  <!-- 分类学信息区域 -->
                  <div>
                    <h3 class="mb-3 flex items-center text-lg font-semibold text-gray-700">
                      <svg
                        class="mr-2 h-5 w-5 text-green-500"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M19 9l-7 7-7-7"
                        ></path>
                      </svg>
                      分类学信息
                    </h3>

                    <!-- 分类路径 -->
                    <div
                      class="taxonomy-path mb-4 rounded-lg border border-green-100 bg-green-50 p-3"
                    >
                      <div class="flex flex-wrap items-center gap-2">
                        <div class="taxonomy-node">{{ item.jie }}</div>
                        <div class="taxonomy-arrow">→</div>
                        <div class="taxonomy-node">{{ item.men }}</div>
                        <div class="taxonomy-arrow">→</div>
                        <div class="taxonomy-node">{{ item.gang }}</div>
                        <div class="taxonomy-arrow">→</div>
                        <div class="taxonomy-node">{{ item.mu }}</div>
                        <div class="taxonomy-arrow">→</div>
                        <div class="taxonomy-node">{{ item.ke }}</div>
                        <div class="taxonomy-arrow">→</div>
                        <div class="taxonomy-node">{{ item.shu }}</div>
                      </div>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                      <div class="detail-item rounded-lg border border-green-100 bg-green-50 p-3">
                        <div class="mb-1 text-xs text-gray-500">界</div>
                        <div class="font-medium text-green-800">{{ item.jie }}</div>
                      </div>

                      <div class="detail-item rounded-lg border border-green-100 bg-green-50 p-3">
                        <div class="mb-1 text-xs text-gray-500">门</div>
                        <div class="font-medium text-green-800">{{ item.men }}</div>
                      </div>

                      <div class="detail-item rounded-lg border border-green-100 bg-green-50 p-3">
                        <div class="mb-1 text-xs text-gray-500">纲</div>
                        <div class="font-medium text-green-800">{{ item.gang }}</div>
                      </div>

                      <div class="detail-item rounded-lg border border-green-100 bg-green-50 p-3">
                        <div class="mb-1 text-xs text-gray-500">目</div>
                        <div class="font-medium text-green-800">{{ item.mu }}</div>
                      </div>

                      <div class="detail-item rounded-lg border border-green-100 bg-green-50 p-3">
                        <div class="mb-1 text-xs text-gray-500">科</div>
                        <div class="font-medium text-green-800">{{ item.ke }}</div>
                      </div>

                      <div class="detail-item rounded-lg border border-green-100 bg-green-50 p-3">
                        <div class="mb-1 text-xs text-gray-500">属</div>
                        <div class="font-medium text-green-800">{{ item.shu }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-card>
            </div>
          </div>

          <!-- 右侧图片预览区域 -->
          <div class="w-full lg:w-1/2">
            <div class="sticky top-6">
              <div
                v-if="items.length > 0 && items[0].imageUrl"
                class="overflow-hidden rounded-xl border border-gray-300 bg-white transition-shadow duration-300 hover:shadow-lg"
              >
                <!-- 图片头部信息 -->
                <div class="bg-gradient-to-r from-blue-600 to-purple-500 p-4 text-white">
                  <h3 class="text-xl font-bold">{{ items[0].chineseName }}</h3>
                  <p class="text-sm italic text-blue-100">{{ items[0].name }}</p>
                </div>

                <!-- 图片容器 -->
                <div class="p-6">
                  <div class="relative">
                    <!-- 固定高度的图片容器 -->
                    <div class="max-h-[575px] w-full overflow-hidden">
                      <el-image
                        class="h-full w-full object-cover"
                        :src="items[0].imageUrl"
                        :preview-src-list="[items[0].imageUrl]"
                        :alt="items[0].chineseName + ' Image'"
                        fit="cover"
                      >
                      </el-image>
                    </div>
                    <!-- 点击查看提示 -->
                    <div
                      class="absolute right-2 top-2 rounded-md bg-black bg-opacity-60 px-2 py-1 text-xs text-white"
                    >
                      点击查看大图
                    </div>
                  </div>

                  <!-- 图片描述 -->
                  <div class="mt-4 text-center">
                    <p class="text-sm text-gray-600">点击图片可查看高清大图</p>
                  </div>
                </div>
                <!-- 相关链接区域 -->
                <div
                  v-if="items[0].relatedLink && items[0].relatedLink.trim() !== ''"
                  class="px-6 pb-6"
                >
                  <div class="rounded-lg border-t border-gray-100 bg-gray-50 p-4">
                    <h4 class="mb-3 flex items-center font-semibold text-gray-800">
                      <LinkOutlined class="mr-2 text-blue-500" />
                      相关链接
                    </h4>
                    <a
                      :href="items[0].relatedLink"
                      target="_blank"
                      rel="noopener noreferrer"
                      class="group flex items-center rounded-md border border-gray-200 bg-white p-3 transition-all duration-200 hover:border-blue-200 hover:bg-blue-50"
                    >
                      <ExportOutlined
                        class="mr-3 text-gray-400 transition-colors group-hover:text-blue-500"
                      />
                      <div class="flex-1">
                        <span
                          class="block text-sm font-medium text-gray-700 group-hover:text-blue-700"
                        >
                          查看更多信息
                        </span>
                        <span class="mt-1 block truncate text-xs text-gray-500">
                          {{ items[0].relatedLink }}
                        </span>
                      </div>
                      <svg
                        class="h-4 w-4 text-gray-400 transition-colors group-hover:text-blue-500"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M9 5l7 7-7 7"
                        ></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        class="max-w-9xl mt-4 min-h-[800px] w-full rounded-xl border border-gray-300 bg-white p-6 shadow-md"
      >
        <div class="mb-6 flex items-center justify-center">
          <div class="relative">
            <h2 class="text-2xl font-bold text-gray-800">详细信息</h2>
            <div
              class="absolute -bottom-2 left-0 right-0 h-1 rounded-full bg-gradient-to-r from-blue-500 to-green-500"
            ></div>
          </div>
        </div>
        <component :is="AllTabs" v-model:items="items" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.custom-shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
</style>
